<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-11 17:26:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-11 17:33:25
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>11</li>
        <li>111</li>
        <li>1111</li>
        <li>11111</li>
        <li>111111</li>
        <li>1111111</li>
    </ul>


    <script>
        var ul =  document.querySelector('ul');
        // var lis = document.querySelectorAll('li');
        // lis.forEach(function(item){
        //     item.onclick = function(){
        //         console.log(item.innerText)
        //     }
        // })

        ul.onclick = function(e){
            if(e.target.nodeName == 'LI'){
                console.log(e.target.innerText);
            }
        }


        // 本来需要每个li 都绑定点击事件 

        // 有点麻烦  


        // 事件委托 

        // 所有的儿子委托自己的父亲执行行为  
        // target 就是他的每一个子元素 

        // 有点 : 减少dom元素的操作 
        // 有利于我们动态的操作标签 
        
    </script>
</body>
</html>